<template>
	<view class="homeLayout">
		
			<view class='classify'>
				
				<view class="select">
					<view class="add" @click="add">
						<uni-icons type="plusempty" size="30"></uni-icons>
						
					</view>
				</view>
				
				
				
				<!-- 点餐主体部分 -->
				<view class="content">
					<view class="left">
						
							<view class = "list" :class="{ active: index == setListIndex }" v-for="(item,index) in menuList" :key='index' @click="changeMenu(index,item.id)">
								{{item.title}}
							</view>
						
					</view>
					
					<scroll-view scroll-y class="right">
						<view class="selectMenu">{{menuTitle}}</view>
						<view class="box">
							
							<view class="list"  v-for="(item,index) in shopData" :key='item.id'>
								{{item.title}}
							</view>
							
							
							
						</view>
					</scroll-view>
					
					
				</view>
				
			
				
			</view>
			
			
			    <!-- 添加弹窗 -->
				<uni-popup ref='addPopup' type='bottom':safe-area="false" >
					<view class="addPopup">
						<view class="popheader">
							<view></view>
							<view class="title">新增</view>
							<view class="close" @click="closeGT">X</view>
						</view>
						
						<scroll-view scroll-y>
								<view class="content">
										<view class="rows">
											<view class="left">
												<view class="star">
													
												</view>
												<view class="text">
													组织类型
												</view>
											</view>
											<view class="right">
												<picker @change="organizationChange" :value="organizationIndex" :range="organizationArray" name="organization">
													<view class="uni-input">{{organizationArray[organizationIndex]}}</view>
												</picker>
												<uni-icons type="forward" size="16"></uni-icons>
														
											</view>
										</view>
										
										<view class="rows" v-if="organizationIndex == 1">
											<view class="left">
												<view class="star">
													*
												</view>
												<view class="text">
													系名
												</view>
											</view>
											<view class="right">
												<input class="uni-input" name="name" placeholder="输入系名" :value="name"/>
														
											</view>
										</view>
											
										<view class="rows" v-if="organizationIndex == 2">
											<view class="left">
												<view class="star">
													
												</view>
												<view class="text">
													院系
												</view>
											</view>
											<view class="right">
												<picker @change="departmentChange" :value="departmentIndex" :range="departmentArray" name="department">
													<view class="uni-input">{{departmentArray[departmentIndex]}}</view>
												</picker>
												<uni-icons type="forward" size="16"></uni-icons>
														
											</view>
										</view>
										
									
										
												
										<button class="but" @click="">确认新增</button>
												
									 <view class="safe-area-shop">
									 	
									 </view>
									<view class="safe-area-inset-bottom">
										
									</view>
									
								</view>
						</scroll-view>
					
					</view>
				</uni-popup>
				<!-- 添加弹窗结束 -->
			
			
			
	</view>
</template>

<script setup>
	
import { computed, ref } from "vue";
import {apiGetClassfy,apiGetCategory,apiGetShopData} from "../../api/apis";
import {onLoad,onShow} from "@dcloudio/uni-app";
import {toFixed} from "../../utils/common.js";

const menuList = ref([]);
const setListIndex = ref(0);
const yhPopup =ref(null);

var   carIndexList = [];//购物车索引

const menuTitle = ref(null);//商品栏显示的菜单名称

// 模拟商品数据
const shopData = ref([]);

const addPopup = ref(null);//添加弹框
const organizationArray = ref(['请选择','院系','班级']);//组织类型
const organizationIndex = ref(0);

const departmentArray = ref([]);//院系
const departmentIndex = ref(0);//

const name          = ref('');//名字


const add = ()=>{
	addPopup.value.open();
}

//组织类型选择
const organizationChange = (e)=>{
	organizationIndex.value = e.detail.value;
}

//院系选择
const departmentChange = (e)=>{
	departmentIndex.value = e.detail.value;
}

const closeGT = ()=>{
	addPopup.value.close();
}
	
	
	onShow(async(e)=>{
		
		
		
		//获取菜单分类
		let {id,token} = uni.getStorageSync('userInfo');
		let data={
			id,
			token
		}
		let res = [
			{
				id:1,
				title:'农业经济管理系',
				
			},
			{
				
				id:2,
				title:'市场营销系',
				
			},	
			{
				
				id:3,
				title:'企业管理系',
				
			},
			{
				
				id:4,
				title:'会计学系',
				
			},
			{
				
				id:5,
				title:'经济学系',
			}
		];
		menuList.value = res;
		console.log(menuList.value)
		menuTitle.value = res[0].title;
		console.log(menuTitle.value)
		console.log(organizationArray.value)
		res.map(
			(e)=>{
				console.log(e);
				console.log(e.title);
				departmentArray.value.push(e.title);
			}
		);
		
		console.log(departmentArray.value);
		
		let res1 =[
			{
				id:1,
				title:'2024-1班'
			},
			{
				id:2,
				title:'2024-2班'
			},
			{
				id:3,
				title:'2024-3班'
			},
			{
				id:4,
				title:'2024-4班'
			},
			{
				id:5,
				title:'2024-5班'
			},
			{
				id:6,
				title:'2024-6班'
			},
			{
				id:7,
				title:'2024-7班'
			},
			{
				id:8,
				title:'2024-8班'
			}
		];
		shopData.value = res1;
		
		
		
	})
	
	
	
	const onClickItem = (e) =>{
		
		if (current.value != e.currentIndex) {
		        current.value = e.currentIndex;
		      }
	}
	// 选择菜单
	const changeMenu = async(index,shopid) =>{
		console.log('我点击了选择菜单');
		setListIndex.value = index;
		menuTitle.value = menuList.value[index].title;
		//查询商品
		let {id,token} = uni.getStorageSync('userInfo');
		let data={
			id,
			token,
			shopid,
			page:1,
			rows:10
		}
		
		let res1 =[
			{
				id:1,
				title:'2024-1班'
			},
			{
				id:2,
				title:'2024-2班'
			},
			{
				id:3,
				title:'2024-3班'
			},
			{
				id:4,
				title:'2024-4班'
			},
			{
				id:5,
				title:'2024-5班'
			},
			{
				id:6,
				title:'2024-6班'
			},
			{
				id:7,
				title:'2024-7班'
			},
			{
				id:8,
				title:'2024-8班'
			}
		];
		shopData.value = res1;
		
	}
	
	const clickYh = ()=>{
		shopShow.value=false;
		isYh.value = true;
		yhPopup.value.open();
	}
	
	
	const closeYh = ()=>{
		shopShow.value = true;
		isYh.value = false;
		yhPopup.value.close();
	}
	
	
	const maskClick = ()=>{
		isYh.value = false;
		shopShow.value = true;
	}
	
	
	
	
	
</script>

<style lang='scss' scoped>
	.homeLayout{
		padding-top:40rpx;
		.popheader{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				color:green;
				font-size: 28rpx;
			}
			.close{
				padding: 4rpx;
			}
		}
		.safe-area-shop{
			/* #ifdef H5 */
				height: 15vh;
			/* #endif */
			/* #ifndef H5 */
				height: 10vh;
			/* #endif */
		}
		.classify{
				 
				 padding: 0 30rpx;
				 
				 
				 
				 .select{
					
					 width:100%;
					 height: 75rpx;
					 display: flex;
					 justify-content: space-between;
					 align-items: center;
					 border-bottom: 1rpx solid #eee;
					 .right{
						 width:140rpx;
						 height:70rpx;
						 font-size: 24rpx;
						 
					 }
					 .left{
						 display: flex;
						 justify-content: space-between;
						 align-items: center;
						 width: 530rpx;
						 height: 70rpx;
						 border-radius: 5rpx;
						 border: 1px solid $xx-color-body;
						 color: #999;
						 padding: 0 20rpx;
						 font-size: 28rpx;
						 line-height: 70rpx;
					 }
					 
					 .add{
					 				
									 margin-bottom: 20rpx;
									 
					 }
				 }
				 
				
				 
				 .content{
					 display: flex;
					 justify-content: space-between;
					
					 .left{
						
						 
						 .list{
							 width: 180rpx;
							 height: 100rpx;
							 background: #eee;
							 font-size: 24rpx;
							 text-align: center;
							 line-height: 100rpx;
							 color: #999;
						 }
						 
						 .active{
							 background: #fff;
							 color: $xx-color-body;
						 }
						 
					 }
					 
					 .right{
						 height: 50vh;
						 .selectMenu{
							 color: #999;
							 font-size: 24rpx;
							 padding-left: 10rpx;
							 padding-top:10rpx;
						 }
						 
						 .box{
							 
							 display: grid;
							 gap:10rpx;
							 grid-template-columns: repeat(3,1fr);
							 height:250rpx;
							 width:510rpx;
							 padding: 20rpx 0;
							 padding-left:10rpx;
							 .list{
								  
								 background: $xx-color-body;
								 border-radius:10rpx;
								 text-align: center;
								 line-height: 60rpx;
								 color: #fff;
							 }
						}
						 
					 }
				 }
				 
				 .shop{
				 					 width: 690rpx;
				 					 height: 100rpx;
				 					 backdrop-filter:blur(10rpx);
				 					 border-radius: 50rpx;
				 					 overflow: hidden;
				 					 display: flex;
				 					 flex-wrap: wrap;
				 					 color:#fff;
				 					 line-height: 100rpx;
				 					 text-align: center;
				 					 position: fixed;
									 /* #ifdef H5 */
									  bottom:10vh;
									 /* #endif */
									 /* #ifndef H5 */
									  bottom:4vh;
									 /* #endif */
									 z-index:100;
				 					
				 					 .left{
				 						 width:28%;
				 						 background: $xx-color-body;
										 transition-property:width;
										 transition-duration: 0.8s;
										 transition-timing-function: inherit;
				 						 
				 					 }
									 button::after{ border: none;}
				 					 .centent{
				 						 margin-left: 2%;
				 						 width:50%;
				 						 background: #BA4A00;
										 border-radius: 0;
										 border:none;
										 color:#fff;
										 line-height: 100rpx;
										 display: flex;
										 
										 .img{
											 width:70rpx;
											 height:100%;
											 margin-right: 15rpx;
											
											 image{
												padding-top: 15rpx;
												width:70rpx;
												height:70rpx;
											 }
										 }
										 
										
									 }
				 					 .right{
				 						 width:20%;
				 						 background: $xx-color-body;
										 
				 					 }
				 }
				 .active{
					 .left{
						 width:0%;
					 }
					 .centent{
						 margin-left: 0%;
						 width: 80%;
						 transition-property:width;
						 transition-duration: 0.8s;
						 transition-timing-function: inherit;
					 }
				 }
				 
			
		}
		
		.addPopup{
			position: relative;
			background:#fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			width:100vw;
			
			scroll-view{
				max-height: 60vh;
			}
			.popheader{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.title{
					color:$xx-color-body;
					font-size: 28rpx;
				}
				.close{
					padding: 4rpx;
				}
			}
			
			.content{
					
				.rows{
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					line-height: 60rpx;
					border-bottom: 1rpx solid #ccc;
					margin-bottom: 20rpx;
					.left{
						display: flex;
						justify-content: space-between;
						.star{
							color:red;
						}
					}
					.right{
						display: flex;
						justify-content: space-between;
						align-items: center;
						text-align: right;
						color:$xx-color-body;
					}
				}
				
				.rowsText{
					padding: 30rpx 0;
						.uni-title{
							
							font-size: 26rpx;
						}
						.uni-textarea{
							border: 1rpx solid $xx-color-body;
						}
				}
				
				.but{
							width: 500rpx;
							height: 80rpx;
							border-radius: 40rpx;
							background: $xx-color-body;
							color: #fff;
				}
				button::after{ border: none;}
				button{
					line-height:80rpx;
				}      			
							
				
			}
		}
		
		
		
	
	}
	

	 
</style>
